<b-card title="Registration" class="register-form">
    <MessageBox v-if="message.text !== ''" :message="message.text" :state="message.state"></MessageBox>

    <b-form @submit.stop.prevent="onRegister">
        <b-form-group label="E-Mail" label-for="mail">
            <b-form-input id="mail" name="mail" v-model="$v.form.mail.$model" type="text"
                          :state="$v.form.mail.$dirty ? !$v.form.mail.$error : null"
                          aria-describedby="mail-feedback"></b-form-input>
            <b-form-invalid-feedback id="mail-feedback">
                Bitte eine Email Adresse angeben.
            </b-form-invalid-feedback>
        </b-form-group>

        <b-form-group label="Passwort" label-for="password">
            <b-form-input id="password" name="password" v-model="$v.form.password.$model" type="password"
                          :state="$v.form.password.$dirty ? !$v.form.password.$error : null"
                          aria-describedby="pwd-feedback"></b-form-input>
            <b-form-invalid-feedback id="mail-feedback">
                Bitte ein Passwort eingeben mit mehr als 7 Zeichen.
            </b-form-invalid-feedback>
        </b-form-group>

        <b-form-group label="Passwort bestätigen" label-for="confirm">
            <b-form-input id="confirm" name="confirm" v-model="$v.form.confirm.$model" type="password"
                          :state="$v.form.confirm.$dirty ? !$v.form.confirm.$error : null"
                          aria-describedby="confirm-feedback"></b-form-input>
            <b-form-invalid-feedback id="confirm-feedback">
                Passwörter müssen übereinstimmen.
            </b-form-invalid-feedback>
        </b-form-group>

        <b-button type="submit" variant="primary" :disabled="$v.form.$invalid">Registrieren</b-button>
        <b-button @click="onLogin" variant="secondary">zum Log-in</b-button>
    </b-form>
</b-card>
